<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon noTitleExplain">
      <el-form
        :model="formData"
        label-width="120px"
        :rules="formRules"
        ref="formData"
        class="form"
      >
        <el-row class="row-padding-bottom">
          <el-col :span="12" class="col-position">
            <el-form-item label="姓名" prop="complaintPerName">
              <el-input
                v-model="formData.complaintPerName"
                placeholder="请输入姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="col-position">
            <el-form-item label="电话" prop="complaintPerTel">
              <el-input
                v-model="formData.complaintPerTel"
                placeholder="请输入正确的电话"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-padding-bottom">
          <el-col :span="24" class="col-position">
            <el-form-item label="诉求内容" prop="complaintContent">
              <el-input
                v-model="formData.complaintContent"
                type="textarea"
                placeholder="请输入诉求内容"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-padding-bottom">
          <el-col :span="12" class="col-position">
            <el-form-item label="部门">
              <el-autocomplete
                style="width: 100%"
                class="inline-input"
                clearable
                v-model="formData.department"
                :fetch-suggestions="querySearch"
                placeholder="请选择部门或填入其他内容"
              >
              </el-autocomplete>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="col-position">
            <el-form-item label="来源" prop="complaintSource">
              <el-input
                v-model="formData.complaintSource"
                placeholder="请输入来源"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-padding-bottom">
          <el-col :span="12" class="col-position">
            <el-form-item label="规定完成时间" prop="complaintEndDate">
              <el-date-picker
                style="width: 100%"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="formData.complaintEndDate"
                type="datetime"
                placeholder="请选择完成时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-padding-bottom">
          <el-col :span="24" class="col-position">
            <el-form-item label>
              <el-button
                class="commonBut saveBtn"
                @click="toAddBackPayDemands()"
                :loading="isAdd"
                type="primary"
                v-sdc
                >确定新增</el-button
              >
              <el-button class="commonBut" @click="goBack">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: 'addPunchCardRule',
  data() {
    const checkPhoneOrTel = (rule, value, callback) => {
      let flag1 = 1
      let flag2 = 1
      if (!/^1[3456789]\d{9}$/.test(value)) {
        flag1 = 2
      }
      if (!/^(\d{3,4}-)?\d{7,8}$/.test(value)) {
        flag2 = 2
      }
      if (value) {
        if (flag1 == 2 && flag2 == 2) {
          callback(new Error('请输入正确的手机号或者座机号码'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      restaurants: [],
      isDelayOptions: [],
      back: true,
      titleText: '新增欠薪诉求',
      formData: {},
      //验证
      formRules: {
        complaintPerName: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'blur',
          },
        ],
        complaintPerTel: [
          {
            required: true,
            message: '请输入电话号码',
            trigger: 'blur',
          },
          { validator: checkPhoneOrTel, trigger: 'blur' },
        ],
        complaintContent: [
          {
            required: true,
            message: '请输入诉求内容',
            trigger: 'blur',
          },
        ],
        department: [
          {
            required: true,
            message: '请选择部门',
            trigger: 'blur',
          },
        ],
        complaintSource: [
          {
            required: true,
            message: '请选择来源',
            trigger: 'blur',
          },
        ],
        complaintEndDate: [
          {
            required: true,
            message: '请选择完成时间',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  created() {
    this.getDepartment()
  },
  methods: {
    /**
     * @description: 获取部门列表
     */
    getDepartment() {
      const vm = this
      vm.axios({
        method: 'get',
        url: 'api-r/rbp/getDepartment',
      }).then(
        (response) => {
          if (!response.data.hasError) {
            let groupList = []
            let groupArr = []
            groupList = response.data.result
            for (let item of groupList) {
              groupArr.push({
                value: item.code,
                name: item.name,
              })
            }
            vm.isDelayOptions = groupArr
          } else {
            vm.$message({
              message: response.data.errorMsg,
              type: 'error',
            })
          }
        },
        (response) => {
          this.$message({
            message: '获取部门列表失败',
            type: 'error',
          })
        }
      )
    },
    querySearch(queryString, cb) {
      var restaurants = this.isDelayOptions
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        )
      }
    },
    /**
     * @description: 确认新增
     */
    toAddBackPayDemands() {
      const vm = this
      vm.$refs.formData.validate((valid) => {
        if (valid) {
          vm.addBackPayDemands()
        } else {
        }
      })
    },
    /**
     * @description: 新增欠薪诉求
     */
    addBackPayDemands() {
      const vm = this
      vm.axios({
        method: 'post',
        url: 'api-r/rbp/add',
        data: vm.formData,
      }).then(
        (response) => {
          if (!response.data.hasError) {
            vm.$message({
              message: '新增成功',
              type: 'success',
            })
            vm.goBack()
          } else {
            vm.$message({
              message: response.data.errorMsg,
              type: 'error',
            })
          }
        },
        (response) => {
          this.$message({
            message: '新增失败',
            type: 'error',
          })
        }
      )
    },
    /**
     * @description: 返回到全部欠薪诉求页面
     */
    goBack() {
      this.$router.push('/home/specialAccount/backPayDemands')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/specialAccount/backPayDemands',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  padding: 30px 250px;
  text-align: center;
  top: 198px;
}
</style>
